<template>
  <div style="height: 20px">
    <a-tooltip
      v-for="(item, index) in colors"
      :key="index"
      class="setting-drawer-theme-color-colorBlock"
    >
      <template #title>{{ item.title }}</template>
      <a-tag
        :color="item.color"
        :style="{
          border: item.border
        }"
        @click="changeColor(item.color)"
      >
        <s-icon
          v-if="item.color == fakeValue"
          type="check-outlined"
          :style="{
            color: checkBoxColor
          }"
        ></s-icon>
      </a-tag>
    </a-tooltip>
    <!-- 自定义颜色 -->
    <a-popover
      v-if="enablePicker && !disabled"
      title="自定义"
      overlay-class-name="themeColorCustomColor"
      placement="bottomRight"
    >
      <template #content>
        <ColorPicker format="hex" disable-history disable-alpha @change="changeColor" />
      </template>
      <a-tag
        :color="isCustomColor() ? fakeValue : ''"
        class="setting-drawer-theme-color-colorBlock"
      >
        <s-icon
          v-if="isCustomColor()"
          type="check-outlined"
          :style="{
            color: checkBoxColor
          }"
        ></s-icon>
      </a-tag>
    </a-popover>
  </div>
</template>
<script>
import ColorPicker from '@/components/ColorPicker/index.vue'
export default {
  // 继承
  name: 'SColorPicker',
  components: { ColorPicker },
  props: {
    modelValue: {
      required: false
    },
    disabled: {
      required: false,
      type: Boolean,
      default: false
    },
    enablePicker: {
      required: false,
      type: Boolean,
      default: true
    },
    checkBoxColor: {
      required: false,
      type: String,
      default: '#000'
    },
    colors: {
      required: false,
      type: Array,
      default: () => {
        return [
          {
            title: '拂晓蓝',
            color: '#1890FF'
          },
          {
            title: '薄暮',
            color: '#F5222D'
          },
          {
            title: '火山',
            color: '#FA541C'
          },
          {
            title: '日暮',
            color: '#FAAD14'
          },
          {
            title: '明青',
            color: '#13C2C2'
          },
          {
            title: '极光绿',
            color: '#52C41A'
          },
          {
            title: '极客蓝',
            color: '#2F54EB'
          },
          {
            title: '酱紫',
            color: '#722ED1'
          }
        ]
      }
    }
  },
  emits: ['change', 'update:modelValue'],
  data() {
    return {
      fakeValue: this.modelValue
    }
  },
  watch: {
    modelValue(val) {
      this.fakeValue = this.modelValue
    }
  },
  methods: {
    isCustomColor() {
      const colorArr = this.colors.map((item) => item.color)
      return this.fakeValue && !colorArr.includes(this.fakeValue)
    },
    changeColor(color) {
      if (!this.disabled) {
        if (!this.$attrs.hasOwnProperty('modelValue')) {
          this.fakeValue = color
        }
        this.$emit('change', color)
        this.$emit('update:modelValue', color)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.setting-drawer-theme-color-colorBlock {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  float: left;
  cursor: pointer;
  margin-right: 2px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  font-weight: 700;
  i {
    font-size: 14px;
  }
}
</style>
